<template>

  <lay-container fluid="true" class="fly-container">


    <div class="fly-tree-box">

      <div class="fly-tree-container">
        <div class="fly-tree-title">机构树</div>
        <lay-tree :data="deptTreeData"
                  :showLine="false"
                  @node-click="deptNodeClick"
                  style="width: 300px; ">
        </lay-tree>
      </div>

      <div class="fly-table-box">
        <lay-card v-auth="['admin:user:role:info:query']" class="fly-search-card">
          <lay-form size="sm">
            <lay-form-item label="身份名称" prop="roleName" mode="inline">
              <lay-input v-model="queryUserRoleInfoParams.roleName"></lay-input>
            </lay-form-item>
            <lay-form-item label="主身份标志" prop="mainFlag" mode="inline">
              <lay-select v-model="queryUserRoleInfoParams.mainFlag">
                <lay-select-option value="" label="全部"></lay-select-option>
                <lay-select-option value="Y" label="是"></lay-select-option>
                <lay-select-option value="N" label="否"></lay-select-option>
              </lay-select>
            </lay-form-item>
            <lay-form-item label="有效标志" prop="validFlag" mode="inline">
              <lay-select v-model="queryUserRoleInfoParams.validFlag">
                <lay-select-option value="" label="全部"></lay-select-option>
                <lay-select-option value="Y" label="有效"></lay-select-option>
                <lay-select-option value="N" label="无效"></lay-select-option>
              </lay-select>
            </lay-form-item>

            <lay-button class="fly-button fly-button-search" size="sm"
                        @click=" reloadUserRoleInfoDate(1, flyLayPage.limit) ">
              <lay-icon class="layui-icon-search"></lay-icon>
              查询
            </lay-button>
          </lay-form>

        </lay-card>

        <div class="fly-table-box">
          <lay-table :page="false"
                     :defaultToolbar="true"
                     :skin="'line'"
                     :columns=" userRoleInfoColumns "
                     :loading=" tableUserRoleInfoData.loading "
                     :data-source=" tableUserRoleInfoData.rows "
                     @change=" reloadUserRoleInfoDate ">

            <template v-slot:toolbar>
              <lay-button v-auth="['admin:user:role:info:save']" v-if="showAddBtn" size="sm" type="primary" class="fly-button fly-toolbar-addition"
                          @click=" onTapUserRoleInfoAdd ">
                <lay-icon class="layui-icon-addition"></lay-icon>
                新增
              </lay-button>
            </template>

            <template v-slot:operator="{ row }">
              <lay-button  v-auth="['admin:user:role:info:view']" size="sm" type="primary" class="fly-button fly-view-button"
                          @click=" onTapUserRoleInfoView(row) ">
                <lay-icon class="layui-icon-list"></lay-icon>
                查看
              </lay-button>
              <lay-button  v-auth="['admin:user:role:info:auz']" size="sm" type="primary" class="fly-button fly-edit-button"
                          @click=" onTapUserRoleClazz(row) ">
                <lay-icon class="layui-icon-auz"></lay-icon>
                岗位设置
              </lay-button>
              <lay-button  v-auth="['admin:user:role:info:update']" size="sm" type="primary" class="fly-button fly-edit-button"
                          @click=" onTapUserRoleInfoEdit(row) ">
                <lay-icon class="layui-icon-edit"></lay-icon>
                编辑
              </lay-button>

              <lay-button  v-auth="['admin:user:role:info:delete']" size="sm" type="danger" class="fly-button fly-remove-button"
                          @click=" removeUserRoleInfoHandler(row.id) ">
                <lay-icon class="layui-icon-delete"></lay-icon>
                删除
              </lay-button>

            </template>
          </lay-table>


          <lay-page v-model="flyLayPage.page"
                    v-model:limit="flyLayPage.limit"
                    :layout="flyLayPage.layout"
                    :pages="flyLayPage.pages"
                    :limits="flyLayPage.limits"
                    theme="blue"
                    :total=" tableUserRoleInfoData.total"
                    @change="previousNextPage" style="margin-top: 15px"></lay-page>

        </div>
      </div>

    </div>
  </lay-container>


  <RefUserRoleInfo ref="refUserRoleInfoComponent"/>

  <RefDeptClazz ref="refDeptClazzComponent"/>

</template>


<script setup lang="ts" name="userRoleInfoComponent">
import {ref, reactive, onMounted} from 'vue';
import RefUserRoleInfo from './RefUserRoleInfo.vue';
import RefDeptClazz from './RefDeptClazz.vue';

import useUserRoleInfoComposable from '@/composables/admin/UserRoleInfoComposable';
import DeptInfoApi from "@/api/admin/DeptInfoApi";
import {UserRoleInfo} from "@/api/admin/model/UserRoleInfoModel";

const deptInfoApi = new DeptInfoApi();

const {
  refUserRoleInfoComponent,
  flyLayPage,
  tableUserRoleInfoData,
  userRoleInfoColumns,
  queryUserRoleInfoParams,

  /* 加载表格 */
  reloadUserRoleInfoDate,
  loadTableUserRoleInfoData,

  /* 新增, 编辑, 查看按钮 */
  onTapUserRoleInfoAdd,
  onTapUserRoleInfoEdit,
  onTapUserRoleInfoView,

  /* 接口 */
  removeUserRoleInfoHandler,
  userRoleInfoDataHandler,
  checkedDeptInfo
} = useUserRoleInfoComposable();


const deptTreeData = ref();
const showAddBtn = ref(false);


/**
 * 上一页, 下一页
 * @param current
 * @param limit
 */
const previousNextPage = ({current = 1, limit = 10}) => {
  queryUserRoleInfoParams.page = current;
  queryUserRoleInfoParams.limit = limit;
  loadTableUserRoleInfoData(queryUserRoleInfoParams);
}


/**
 * 页面初始化, 加载数据
 */
onMounted(() => {
  queryUserRoleInfoParams.userId = '';
  reloadUserRoleInfoDate(1, flyLayPage.limit);
  deptInfoApi.findDeptTree('Y').then(res => {
    deptTreeData.value = res.data.data;
  })

})


const deptNodeClick = (obj: any) => {
  showAddBtn.value = false;
  queryUserRoleInfoParams.deptCode = '11';
  if ('Y' === obj.type) {
    showAddBtn.value = true;
    queryUserRoleInfoParams.deptCode = obj.id;
  }
  reloadUserRoleInfoDate(1, flyLayPage.limit);
  checkedDeptInfo.value = obj;
}


const refDeptClazzComponent = ref();

const onTapUserRoleClazz = (userRoleInfo: UserRoleInfo) => {
  refDeptClazzComponent.value.open(userRoleInfo);
}


</script>


<style scoped>

</style>